<template>
	<view >
		<!-- 搜索热区 -->
	<SearchList />
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay circular>
			<swiper-item v-for="(item,index) in getSwiperlist" :key='index'>
				<image :src="item.image_src" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 导航栏 -->
		<view class="nav">
			<image v-for="(items,indexs) in categoryList" :key='indexs' :src="items.image_src" mode=""></image>
		</view>
		<!-- 楼层 -->
		<view class="floor">
			<view class="floor-item" v-for="(floorItem,i) in getFloorList" :key='i'>
				<image :src="floorItem.floor_title.image_src" mode=""></image>
				<view class="produc-list">
					<image :src="floorItem.product_list[0].image_src" mode=""></image>
					<view class="rigth">
						<image v-for="(item,index) in floorItem.product_list" :src="item.image_src" mode="" :key="index" v-if="index"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import request from '../../utils/request.js'
	import SearchList from '../../compoents/SearchList.vue'
	export default {
		components:{
			SearchList
		},
		data() {
			return {
				getSwiperlist:[],
				categoryList:[],
				getFloorList:[]
			}
		},
		onLoad() {
		this.getSwiperdate()
		this.getCatitems()
		this.getFloordata()
		},
		methods: {
			// 导航层
			
		async	getCatitems(){
				this.categoryList = await this.$request({
					url:'/api/public/v1/home/catitems',
				})
			},
			// 楼层
			
		 async getFloordata(){
						this.getFloorList = await this.$request({
							url:'/api/public/v1/home/floordata',
						})
			},
			// 轮播图
		async getSwiperdate(){
		this.getSwiperlist = await this.$request({
			url:'/api/public/v1/home/swiperdata',
		})
			
		}
		}
	}
</script>

<style scoped lang="less">
	.search-link{
		background-color: #eb4450;
			padding: 20rpx 16rpx;
			.inner{
				height: 60rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			icon{
				margin-top: 4rpx;
		}
		text{
			color: #bbb;
			margin-left: 16rpx;
		}
	}
	swiper{
		height: 340rpx;
		image{
			width: 100%;
			height: 340rpx;
		}
	}
	.nav{
		height: 194rpx;
		border: 1rpx solid green;
		display: flex;
		align-items:center;
		justify-content: space-around;
		image{
			width: 128rpx;
			height: 140rpx;
		}
	}
	.floor{
		.floor-item{
			>image{
				width: 100%;
				height: 88rpx;
			}
			.produc-list{
				display: flex;
				padding: 20rpx 17rpx;
				>image{
					height: 386rpx;
					width: 232rpx;
				}
				.rigth{
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					image{
						height: 188rpx;
						width: 232rpx;
						margin: 0 0 10rpx 10rpx;
					}
				}
			}
		}
	}
</style>